<template>
  <div>
    <ul class="xuanze_xiazhu_ul zhenghe_danshuang">
      <li
        class="zhenghe_span"
        v-for="(item,index) in list"
        :class="{'active': isActive(index)}"
        :key="index"
        @click="changeData(index)"
      >
        <b>{{item.text}}</b>
        <p>{{item.odd}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    oods_ds: {
      type: String | Number
    },
    oods_dx: {
      type: String | Number
    },
    name: {
      type: String
    }
  },
  data() {
    return {
      activeArray: []
    };
  },
  computed: {
    list() {
      let { oods_ds, oods_dx, name } = this;
      let arr = [
        { text: "单", odd: oods_ds, type: `${name}单双` },
        { text: "双", odd: oods_ds,type: `${name}单双` },
        { text: "大", odd: oods_dx,type: `${name}大小` },
        { text: "小", odd: oods_dx, type: `${name}大小` }
      ];
      return arr;
    }
  },
  methods: {
    clear(){
      this.activeArray = []
    },
    changeData(key) {
      let {list} = this;
      let isIncludes = this.activeArray.includes(key);
      if (isIncludes) {
        this.activeArray.splice(this.activeArray.indexOf(key), 1);
      } else {
        this.activeArray.push(key);
      }
      console.log(this.activeArray);
      let temp = [];
      this.activeArray.forEach(item => {
        temp.push({type: list[item].type, value: list[item].text, odd: list[item].odd})
      })
      this.$emit('handlerSelected', temp);
    },
    isActive(key) {
      return this.activeArray.includes(key);
    }
  }
};
</script>

<style>
</style>
